<template>
  <div class="kuang">
    <!-- 搜索框 -->
    <Serach></Serach>
    <!-- 下拉刷新 -->
<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
  <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
  <template #pulling="props">
    <img
      class="doge"
      src="https://img01.yzcdn.cn/vant/doge.png"
      :style="{ transform: `scale(${props.distance / 80})` }"
    />
  </template>

  <!-- 释放提示 -->
  <template #loosing>
    <img class="doge" src="../../assets/img/下拉.png" />
  </template>

  <!-- 加载提示 -->
  <template #loading>
    <img class="doge" src="../../assets/img/下拉.png" />
  </template>

    <!-- /下拉刷新 -->

    <img src="@/assets/img/店名.jpg">

    <!-- 视屏 -->
    <Video/>

    <!-- 提示框 -->
    <div>
      <van-notice-bar
        left-icon="volume-o"
        scrollable
        text="活动来啦！只要喊一句‘胡杰傻逼’就可获得30元优惠券！"
      />
    </div>

    <!-- 轮播图 -->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="../../assets/img/lun1.jpg"></van-swipe-item>
        <van-swipe-item><img src="../../assets/img/lun2.jpg"></van-swipe-item>
        <van-swipe-item><img src="../../assets/img/lun4.jpg"></van-swipe-item>
        <van-swipe-item><img src="../../assets/img/lun3.jpg"></van-swipe-item>
      </van-swipe>
    </div>

    <!-- 优惠券 -->
    <!-- <div @click="$router.push({path:'/youhui'})"> -->
    <div>
    <van-cell
    is-link
    @click="showList = false"
    :coupons="coupons"
    :chosen-coupon="chosenCoupon">
    <img src="../../assets/img/优惠券.jpg">
    </van-cell>
    <!-- <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" /> -->
    <!-- 优惠券列表 -->
    <van-popup
      v-model="showList"
      round
      position="bottom"
      style="height: 60%; padding-top: 4px;"
    >
    <van-coupon-list
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      :disabled-coupons="disabledCoupons"
      @change="onChange"
      @exchange="onExchange"
    />
    </van-popup>
    </div>

    <!-- 商品展示 -->
    <img src="../../assets/img/rmTOP.jpg">
    <van-grid square :border="false" :column-num="2">
      <van-grid-item>
       <img src="../../assets/img/rm1.jpg" />
      </van-grid-item>
      <van-grid-item>
       <img src="../../assets/img/rm2.jpg" />
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/img/rm3.jpg" />
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/img/rm4.jpg" />
      </van-grid-item>
    </van-grid>
    <!-- 掌柜推荐 -->
    <van-grid :border="false" :column-num="1">
      <van-grid-item>
        <img src="../../assets/img/掌柜推荐.jpg">
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/img/掌柜1.jpg">
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/img/掌柜2.jpg">
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/img/掌柜3.jpg">
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/img/掌柜4.jpg">
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/img/掌柜5.jpg">
      </van-grid-item>
    </van-grid>
  </van-pull-refresh>
  <Top/>
  </div>
</template>

<script>
import { Toast } from 'vant'
import Serach from '@/views/search/index'
import Top from '@/views/home/top'
import Video from '@/views/home/top/video.vue'

const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
}
export default {
  components: {
    Serach, Top, Video
  },
  data () {
    return {
      count: 0,
      isLoading: false,
      showList: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon]
    }
  },
  methods: {
    onRefresh () {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 1000)
    },
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange (code) {
      this.coupons.push(coupon)
    }
  }
}
</script>

<style lang="less">
.kuang {
  padding-bottom: 55px;
  background: rgb(27, 26, 26);
}
.doge {
    width: 100%;
    height: 72px;
    margin-top: 4px;
    border-radius: 4px;
    // padding-left: 35%;
  }
img {
  display: block;
  width: 100%;
  height: 100%;
}
.my-swipe .van-swipe-item {
    display: block;
    // margin-top: -3px;
    color: #fff;
    width: 100%;
    height: 100%;
  }
.van-grid div {
  padding: 0;
  }
.van-cell {
  padding: 0;
}
.van-cell i {
  margin: 0;
}
.van-icon-arrow::before {
  display: none;
  margin: 0;
}
</style>
